<script setup>
import { onMounted, ref, nextTick } from 'vue'
import { fetchMapBasic } from '@/api/map.services'
const emits = defineEmits(['handleMapItem'])
const mapData = ref([])
const treeProps = ref({
    id: "id",
    children: "children",
    label: "name",
    isLeaf: (data, node) => !data.isLeaf,
})
const handleMapNode = (node) => {
    emits('handleMapItem', node)
}
const treeRef = ref(null)
const initMapTree = async () => {
    const { data } = await fetchMapBasic()
    mapData.value = data
    if (mapData.value.length > 0) {
        nextTick(() => {
            treeRef.value.setCurrentKey(mapData.value[0].id)
        })
        emits('handleMapItem', mapData.value[0])
    }
}
onMounted(() => {
    initMapTree()
})
defineExpose({
    initMapTree
})
</script>
<template>
    <div :class="$style['tree-container']">
        <el-tree :data="mapData" ref="treeRef" node-key="id" highlight-current :props="treeProps"
            @node-click="handleMapNode" :expand-on-click-node="false">
            <template #default="{ data }">
                <div v-if="data.is_marker" style="color: #ccc; pointer-events: none">
                    <el-icon style="margin-right: 5px">
                        <img src="@/assets/tree/host.png" alt="" />
                    </el-icon>
                    {{ data.name }}
                </div>
                <div v-if="!data.is_marker">
                    <el-icon style="margin-right: 5px; pointer-events: none">
                        <img src="@/assets/tree/host.png" alt="" />
                    </el-icon>
                    {{ data.name }}
                </div>
            </template>
        </el-tree>
    </div>
</template>
<style lang="scss" module>
.tree-container {
    box-sizing: border-box;
    flex: 230px 0 0;
    height: 100%;
    padding: 10px;
    border-right: 1px solid #EBECED;

    & [class~='el-tree'] {
        --el-tree-node-content-height: 32px;
        --el-tree-node-hover-bg-color: rgba(47, 125, 241, 0.12);

        overflow-y: auto;
        height: 100%;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
    }

    & [class~='el-tree-node__content'] {
        height: 32px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size: 13px;
        margin-top: 2px;
    }

    & [class~="is-current"]>[class~="el-tree-node__content"] {
        background-color: rgba(47, 125, 241, 0.12) !important;
        border-radius: 6px;
        color: rgb(47, 125, 241);
        font-weight: 600;
    }

    & [class~='el-tree-node__content']:hover {
        background-color: rgba(47, 125, 241, 0.12);
        border-radius: 6px;
    }
}
</style>
